import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'dva'
import { Card, Col, Row, Button, Select } from 'antd'
import { routerRedux } from 'dva/router'
import queryString from 'query-string'
import ProcessTypeList from './ProcessTypeList'
import ProcessTypeModal from './ProcessTypeModal'
import UpdateProcessTypeModal from './UpdateProcessTypeModal'
import { config } from '../../utils'
import * as cookie from '../../services/cookie'

import styles from './index.css'

const { api } = config
const { processDefinition } = api
const Option = Select.Option
const Pt = ({ location, dispatch, pt, loading }) => {
  location.query = queryString.parse(location.search)
  const { list, pagination, currentItem, modalVisible, updateModalVisible, modalType, systemprocessSelect } = pt
  const { isMotion, updateItem } = pt
  const systemprocessSelectOption = systemprocessSelect.map(systemprocessItem => <Option key={systemprocessItem.appId}>{systemprocessItem.appName}</Option>)
  const modalProps = {
    dispatch,
    systemprocessSelectOption,
    item: modalType === 'create' ? {} : currentItem,
    visible: modalVisible,
    maskClosable: false,
    confirmLoading: loading.effects['pt/addProccessType'],
    title: `${modalType === 'create' ? '新建业务类型' : '新建业务类型'}`,
    wrapClassName: 'vertical-center-modal',
    onOk (data) {
      const cookieUser = cookie.getCookie('token')
      const user = JSON.parse(cookieUser)
      data.createUser = user.account
      dispatch({
        type: 'pt/addProccessType',
        payload: data,
      })
    },
    onCancel () {
      dispatch({
        type: 'pt/hideAddProcessTypeModal',
      })
    },
  }
  const updateModalProps = {
    dispatch,
    systemprocessSelectOption,
    item: modalType === 'create' ? {} : currentItem,
    visible: updateModalVisible,
    maskClosable: false,
    confirmLoading: loading.effects['pt/updateProccessType'],
    title: `${modalType === 'create' ? '更新业务类型' : '更新业务类型'}`,
    wrapClassName: 'vertical-center-modal',
    updateItem,
    onOk (data) {
      const cookieUser = cookie.getCookie('token')
      const user = JSON.parse(cookieUser)
      data.createUser = user.account
      dispatch({
        type: 'pt/updateProccessType',
        payload: data,
      })
    },
    onCancel () {
      dispatch({
        type: 'pt/hideUpdateProcessTypeModal',
      })
    },
  }
  const listProps = {
    dataSource: list,
    loading: loading.effects['pt/fetch'],
    pagination,
    location,
    isMotion,
    onChange (page) {
      const { query, pathname } = location
      dispatch(routerRedux.push({
        pathname,
        query: {
          ...query,
          page: page.current,
          pageSize: page.pageSize,
        },
      }))
    },
    onDeleteItem (id) {
      dispatch({
        type: 'pt/remove',
        payload: id,
      })
    },
    onEditItem (record) {
      dispatch({
        type: 'pt/onEditProcessTypeBtnClick',
        payload: record,
      })
    },
    onOk (record) {
      console.log(record)
    },
  }
  function onAddProcessTypeBtnClick () {
    dispatch({
      type: 'pt/onAddProcessTypeBtnClick',
    })
  }
  return (
    <Row gutter={0}>
      <Col lg={24} md={24}>
        <Card title="业务类型">
          <div className={styles.create}>
            <Button icon="download" size={'large'} type="primary" onClick={onAddProcessTypeBtnClick}>创建业务类型</Button>
          </div>
          <ProcessTypeList {...listProps} />
          {modalVisible && <ProcessTypeModal {...modalProps} />}
          {updateModalVisible && <UpdateProcessTypeModal {...updateModalProps} />}
        </Card>
      </Col>
    </Row>
  )
}

Pt.propTypes = {
  pt: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
}

export default connect(({ pt, loading }) => ({ pt, loading }))(Pt)
